<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../res/vue.js"></script>
</head>
<body>

<div id="app-1">
    <ol v-for="item in items">
        <li>{{item.message}}</li>
    </ol>

    index 列表
    <hr/>
    <ol v-for="(item,index) in items">
        <li>{{item.message}}---{{index}}</li>
    </ol>

    <ol v-for="(item,index) of items">
        <li>{{item.message}}---{{index}}</li>
    </ol>

    <ol v-for="(item,index) of items">
        <span>hello </span><li>{{item.message}}</li>
    </ol>

    <ol>
        <template v-for="item in items">
            <li>{{item.message}}</li>
            <li>---</li>
        </template>
    </ol>

    <ul id="repeat-object" class="demo">
        <li v-for="value in object">** {{value}}</li>
    </ul>

    <div v-for="(value,key) in object">
        {{key}}:{{value}}
    </div>
    <div v-for="(key,value,index) in object">
        {{index}}:{{key}}:{{value}}
    </div>

    <div v-for="n in 10">{{n}}</div>

    <ul>
        <li v-for="todo in todos" v-if="todo.status==2">{{todo.todoTime}}:{{todo.todoName}}</li>
    </ul>
    <div>是否渲染元素</div>
    <hr/>
    <ul>
        <template >
            <li v-for="todo in todos" :key="todo.id">{{todo.todoTime}}:{{todo.todoName}}</li>
        </template>
    </ul>
    <ul>
        <li v-for="n in evenNumbers">{{n}}</li>
    </ul>
    <ul>
        <li v-for="n in even(evenNumbers)">{{n}}</li>
    </ul>
</div>

<script type="text/javascript">
    var app = new Vue({
        el:'#app-1',
        methods:{
            even:function(numbers){
                return this.numbers.filter(function (number) {
                    console.log(number);
                    return number%2===0;
                })
            }
        },
        computed:{
            evenNumbers:function () {
                return this.numbers.filter(function (number) {
                    console.log(number);
                    return number%2===0;
                })
            }
        },
        data:{
            numbers:[1,2,3,4,5],
            items:[{
                message:'Foo',
            },{
                message:'Bar'
            }],
            shouldRenderTodo:false,
            object:{
                FirstName:'john',
                LastName:'Doe',
                Age:30
            },
            todos:[{
                id:'123',
                todoName:'见个朋友',
                todoTime:'2017-06-05',
                status:'1'
            },{
                id:'456',
                todoName:'和女朋友吃饭',
                todoTime:'2017-06-05',
                status:'2'
            },{
                id:'567',
                todoName:'见父母',
                todoTime:'2017-06-05',
                status:'3'
            }]
        }
    })
</script>
</body>
</html>